<template>
 <div class="home_box">
 <div class="index_border" />
 <div class="head">
  <div class="tit">{{tit.title}}</div>
  <div class="more">
     <span>更多</span>
    <van-icon name="arrow" size="18"/>
  </div>
 </div>
 <div class="content">
  <van-row>
    <van-col span="4" v-for="(item,index) in data" :key="index" class="bigbox">
      <router-link :to="item.link" @click.native="clickMenu(item)">
     <div class="minibox">
       <div class="imgbox">
       <img :src="item.cover" style="width: 200px; height: 225px"/>
      </div>
     </div>
      <div class="tit" >{{ item.title }}</div>
      <div class="txt">{{ item.author }}</div>
    </router-link>
    </van-col>
 </van-row>
 <router-view></router-view>
 </div>
</div> 
</template>

<script>
import { mapMutations } from 'vuex'
export default {

props:{
  //传入默认值
  // 在上面代码中，当组件没有传入相应的属性值的情况下，会显示 undefined 或者在模板HTML没有任何文本，这个时候可以考虑定义一个默认值：
  tit:{type:Object,default:{}},
  data: { type: Array, default: [] }
},
methods:{
  //调用vuex 把有关数据传输过去
  ...mapMutations(['setMhData']),
 clickMenu(item)
 {
 //命名路由跳转
//  this.$router.push(
//   {
   
//   },
 //通过vuex把信息传给about组件
  this.setMhData(item)
  
  console.log('点击了')
 }, 
}
}
</script>

<style>
.home_box
{
  position: relative;
  background-color: #fff;
  padding: 10px 10px;
}
.head
{
  height: 40px;
}
.head .tit
{
  font-size: 25px;
  color: black;

}
.head .more
{
  position: absolute;
  top: 20px;
  right: 10px;
}
.head .more span
{
  font-size:20px;
}
.imgbox
{
  padding: 10px 30px;
}
.bigbox
{
  height: 330px;
}
.minibox
{
  text-align: center;
}
.content .tit {
  width: 220px;
  color: black;
   font-size: 18px;
   line-height: 36px;
   margin: 0 0 0 35px;
   overflow: hidden;
   white-space:nowrap; 
   text-overflow:ellipsis 
}
.content .txt{
 width: 150px;
 font-size: 14px;
 color: #909090;
 line-height: 15px;
 margin: 0 0 0 35px;
 letter-spacing: 0;
 overflow: hidden;
 white-space:nowrap; 
 text-overflow:ellipsis 
}
</style>